/**
 * @fileoverview Connect Screen for devices.
 *
 * @license Copyright 2018 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */

{namespace cwc.soy.connectScreen.Screens autoescape="strict"}


/**
 * Connecting step screen.
 */
{template .connectingSteps}
  {@param step: number}
  {@param text: string}

  {if $step == -1}
    <h4>{msg desc=""}{$text}{/msg}</h4>
    <p>
      Please make sure that the device is paired with your OS, before starting Coding with Chrome.<br>
      It's best to consult your device's user manual or website for specific instructions.<br>
      Once successfully paired, Coding with Chrome will automatically recognize the device.<br>
    </p>
  {elseif $step > 0}
    <ol class="mdl-steps" style="width: 400px;">
      <li data-step="1"
          class="{if $step == 1}is-active{else}is-complete{/if}">
        {msg desc=""}Connect{/msg}
      </li>
      <li data-step="2"
          class="{if $step == 2}is-active{elseif $step > 2}is-complete{/if}">
        {msg desc=""}Prepare{/msg}
      </li>
      <li data-step="3"
          class="{if $step == 3}is-active{/if}">
        {msg desc=""}Ready{/msg}
      </li>
    </ol>
    <p>
      {msg desc=""}{$text}{/msg}
    </p>
    {if $step > 0 and $step < 3}
      <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
    {/if}
  {/if}
{/template}
